<script setup>

import api from '../api/detail.js'

const list = ref([])

const active = ref('detail');

const formData = reactive({
  name: '螺丝刀',
  spec: '5*5*6',
  unit: '把',
  price: 15,
  num: 3,
  totalPrice: 45,
  planType: 'A计划',
  planStartDate: '2025-04-04',
  planEndDate: '2025-04-04',
  reason: '为了部落'
});

const attachList = ref([])

// 通过审批
function approve(item) {
  api.approve().then(res=> {
    if(res.code === '200'){
      return window.location.href= reqUrl+'/system/approve/index3';
    }else{
      let msg = res.message+":"+res.remark.message;
      console.log(msg);
      alert(msg);
    }
  });
}

function reject(item) {

  api.reject().then(res=> {
    if(res.code === '200'){
      window.location.href= reqUrl+'/system/approve/index3';
    }else{
      let msg = res.message+":"+res.remark.message;
      console.log(msg);
      alert(msg);
    }
  })
}

function formatSize(value) {
  if(!value){
    return "0 Bytes";
  }
  var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
  var index=0;
  var srcsize = parseFloat(value);
  index=Math.floor(Math.log(srcsize)/Math.log(1024));
  var size =srcsize/Math.pow(1024,index);
  size=size.toFixed(2);//保留的小数位数
  return size+unitArr[index];
}

/**
 * 选择附件后的操作
 * @param file
 */
const afterRead = (file) => {
  const f = file.file;
  // 此时可以自行将文件上传至服务器
  attachList.value.push({
    name: f.name,
    size: formatSize(f.size),
    username: '陈仕贤',
    datetime: new Date().toLocaleDateString()
  })
  console.log(file);
};

onMounted(()=> {

})
</script>

<template>
  <div>
    <van-tabs v-model:active="active" type="card">
      <van-tab name="detail" title="详情">
        <div style="padding: 1em">
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                  name="name"
                  label="物资名称"
                  placeholder="物资名称"
              >
                <template #input>
                  {{formData.name}}
                </template>
              </van-field>
              <van-field
                  name="spec"
                  label="规格型号"
                  placeholder="规格型号"
              >
                <template #input>
                  {{formData.spec}}
                </template>
              </van-field>
              <van-field
                  name="unit"
                  label="预算单位"
                  placeholder="预算单位"
              >
                <template #input>
                  {{formData.unit}}
                </template>
              </van-field>
              <van-field
                  name="num"
                  label="预算数量"
                  placeholder="预算数量"
              >
                <template #input>
                  {{formData.num}}
                </template>
              </van-field>
              <van-field
                  name="price"
                  label="预算单价"
                  placeholder="预算单价"
              >
                <template #input>
                  {{formData.price}}
                </template>
              </van-field>
              <van-field
                  name="totalPrice"
                  label="预算总价"
                  placeholder="预算总价"
              >
                <template #input>
                  {{formData.totalPrice}}
                </template>
              </van-field>
              <van-field
                  name="planType"
                  label="计划类型"
                  placeholder="计划类型"
              >
                <template #input>
                  {{formData.planType}}
                </template>
              </van-field>
              <van-field
                  name="planStartDate"
                  label="计划开始日期"
                  placeholder="计划开始日期"
              >
                <template #input>
                  {{formData.planStartDate}}
                </template>
              </van-field>
              <van-field
                  name="planEndDate"
                  label="计划结束日期"
                  placeholder="计划结束日期"
              >
                <template #input>
                  {{formData.planEndDate}}
                </template>
              </van-field>

              <van-field
                  v-model="formData.reason"
                  type="textarea"
                  rows="3"
                  autosize
                  name="reason"
                  label="紧急采购原因"
                  placeholder="紧急采购原因"
              ></van-field>
            </van-cell-group>

          </van-form>
        </div>
      </van-tab>
      <van-tab name="attach" title="附件">
        <div style="padding: 1em">

          <table class="attach-table">
            <thead>
            <tr>
              <th>附件名称</th><th>附件大小</th><th>上传人</th><th>上传时间</th>
            </tr>
            </thead>
            <tbody>
            <tr  v-for="f in attachList">
              <td>{{f.name}}</td><td>{{f.size}}</td><td>{{f.username}}</td><td>{{f.datetime}}</td>
            </tr>
            </tbody>
          </table>


          <div style="text-align: right">
            <van-uploader :preview-image="false" v-model="fileList" :max-count="10" :after-read="afterRead">
              <van-button style="margin: 1em" size="small" type="primary">上传文件</van-button>
            </van-uploader>
          </div>

        </div>
      </van-tab>
    </van-tabs>

    <div class="bottom-action-bar">
      <van-button type="primary" size="small" @click="approve">同意</van-button>
      <van-button  type="danger" size="small" @click="reject">退回</van-button>
    </div>
  </div>
</template>

<style scoped>

</style>